<!--  通用Table组件，除以下参数外参数使用方式不变 20220301 botao.yu  -->
<!--  @param ref 必输  自定义名称 -->
<!--  @param refId 必输 自定义名称，必须和ref的值保持一致 -->
<!--  @param multiple 非必输  默认多选 true 多选 false 单选 -->
<!--  @param columList 使用列插槽 列保持原来的使用方式声明, 预留columList2、columList3插槽，注意* 不需要再声明selection列 -->
<!--  @param rowClick  原row-click方法、在支持行选中的基础上调用 -->
<!--  @param rowStyle  原row-style方法、在支持行选中的基础上调用 -->
<!--  @param showCheckBox 非必输  默认显示 true 显示 false 隐藏 控制列前方的checkbox/ratio是否显示  botao.yu 20230601-->
<template>
  <div class="table-container">
    <el-table v-bind="Object.assign({},$attrs,$props)" :ref="refId" :id="refId"
              :highlight-current-row="highlightCurrentRow"
              stripe
              @row-click="rowClickFun"
              :row-style="rowStyleFun"
              :border="border"
              :height="tableHeight"
    >
      <el-table-column type="selection"  v-if="_multiple&&_showCheckBox" width="55" align="center" />
      <el-table-column type="radio" width="55" label="单选"  align="center"  class-name="radioStyle" v-if="_showCheckBox&&!_multiple">
        <template #default="scope">
          <el-radio v-model="radioVal" :label="scope.$index + 1"  @click.native.prevent="radioChange(scope.row, scope.$index + 1)"></el-radio>
        </template>
      </el-table-column>
      <slot name="columList"></slot>
      <slot name="columList2"></slot>
      <slot name="columList3"></slot>
    </el-table>
  </div>
</template>
<script>

export default {
  props: {
    multiple:{
      type:Boolean,
      default:true
    } ,
    showCheckBox: {
      type:Boolean,
      default: true
    },
    rowClick: Function,
    rowStyle: Function,
    refId: String,
    selectionGroupRow: Array,
    data:Array,
    border:{
      type:Boolean,
      default:true
    },
    tableHeight:{
      type:[Number,String],
      default:"100%"
    },
    highlightCurrentRow:{
      type:Boolean,
      default:true
    }
  },
  watch: {
    data: {
      handler(v) {
        // if (this.multiple!= true &&this.multiple!='true') {
        let refsElTable = this.$refs[this.refId];
        if(refsElTable!=undefined){
          this.radioVal='';
          this._selectionGroupRow = [];
          refsElTable.clearSelection();
        }
        // }
      },
      immediate: true
    }
  },
  data() {
    return {
      // rowClick:this.$props.rowClick,
      // rowStyle:this.$props.rowStyle,
      _selectionGroupRow:[],
      radioVal:'',
      height:window.innerHeight * 0.80 + 'px',
      // multiple:(this.$props.multiple===undefined||this.$props.multiple==='null'||this.$props.multiple===''||this.$props.multiple===undefined)?true:((this.$props.multiple==='false'||this.$props.multiple===false)?false:true),
      // showCheckBox:(this.$props.showCheckBox===undefined||this.$props.showCheckBox==='null'||this.$props.showCheckBox==='')?true:((this.$props.showCheckBox==='false'||this.$props.showCheckBox===false)?false:true),
      // refId:(this.$props.refId===undefined||this.$props.refId==='null'||this.$props.refId==='')?this.$props.refId:this.$props.refId
    }
  },
  computed:{
    _showCheckBox(){
      return (this.$props.showCheckBox===undefined||this.$props.showCheckBox==='null'||this.$props.showCheckBox==='')?true:((this.$props.showCheckBox==='false'||this.$props.showCheckBox===false)?false:true)
    },
    _multiple(){
      return (this.$props.multiple===undefined||this.$props.multiple==='null'||this.$props.multiple===''||this.$props.multiple===undefined)?true:((this.$props.multiple==='false'||this.$props.multiple===false)?false:true)
    }
  },
  created() {
  },
  methods: {
// 点击单选框单元格触发事件
    radioChange (row, index)  {
      // radioClick(row, index)
    },
    //行选中
    rowClickFun(row, column, event) {
      let refsElTable = this.$refs[this.refId]; // 获取表格对象
      let multiple = this._multiple;
      let findRow = this._selectionGroupRow.find(c => c.rowIndex == row.rowIndex);
      if (findRow) {
        refsElTable.toggleRowSelection(row, false);
        refsElTable.setCurrentRow();
        this.lsh.remove(this._selectionGroupRow, function (o) {
          return o.rowIndex === row.rowIndex;
        });
        if (multiple!= true &&multiple!='true') {
          this.radioVal='';
        }
        return;
      }
      if (multiple === true || multiple === 'true') {
      } else {
        refsElTable.setCurrentRow();
        refsElTable.clearSelection();
        this.radioVal=row.rowIndex+1;
        this._selectionGroupRow = [];
      }
      this._selectionGroupRow.push(row);
      refsElTable.setCurrentRow(row);
      refsElTable.toggleRowSelection(row); // 调用选中行方法
      if (Object.prototype.toString.call(this.$props.rowClick) === '[object Function]') {
        this.$props.rowClick(row, column, event);
      }

    },
    //选中赋予index
    rowStyleFun({row, rowIndex}) {
      Object.defineProperty(row, 'rowIndex', { //给每一行添加不可枚举属性rowIndex来标识当前行
        value: rowIndex,
        writable: true,
        enumerable: false
      })

      if (Object.prototype.toString.call(this.$props.rowStyle) === '[object Function]') {
        this.$props.rowStyle(row, rowIndex);
      }
    }
  }
}
</script>
<script setup>
import {getCurrentInstance, watch} from 'vue'
const {proxy} = getCurrentInstance()

watch(() => proxy.$attrs.data, (nv, ov) => {
  proxy._selectionGroupRow = [];
}, {deep: true})
</script>

<style lang="scss">
// 单选样式
.radioStyle {
  .el-radio {
    .el-radio__label {
      display: none;
    }
    &:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
      box-shadow: none;
    }
  }
  :deep(tbody) {
    .el-table__row {
      cursor: pointer;
    }
  }
}
// !必须固定表格父元素高度(flex或height)且设置display:flex，否则表格高度会一直增长
.table-container{
  flex: 1 0 300px;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
}

</style>
